import React, { memo ,useCallback} from 'react'
import {useDispatch  } from "react-redux";
import {LoginWrapper} from './style'
import { Form, Input, Button ,message} from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { reqLogin } from "../../network";
import { saveUserInfoAction } from "./store/actionCreator";
import logo from "../../assets/imgs/logo.png";

export default memo(function HjLogin(props) {

  // reudx hooks
  const dispatch = useDispatch()
  // 通过redux hooks在redux中获取
  // const {user} = useSelector(state => ({  //要返回一个对象
  //   user:state.userInfo.user,
    
  // }))


  // 点击登录后验证成功的回调函数
 const submitSuccess =  useCallback(async(value)=>{
  
  // 发异步请求
     const result = await reqLogin(value)
     const {status,msg,data} =  result
     if(status!==0) message.error(msg,1)
     else{
        dispatch(saveUserInfoAction(data))
        message.success('登录成功',1)
        props.history.replace('/admin/home')
     }
     
 }, [dispatch,props])

  // 点击登录后验证失败的回调函数
 const submitFail =  useCallback((values, errorFields)=>{
   message.error('表单输入错误，请检查!!!');
 }, [])

  return (
    <LoginWrapper>
      <div className="header">
          <img src={logo} alt="logo" />
          <h1>商品管理系统</h1>
        </div>
        <div className="login">
          <div className="login-header">用户登录</div>
          <div className="login-content">
             <Form name="basic" autoComplete="off" onFinish={submitSuccess} onFinishFailed={submitFail} >
                <Form.Item 
                    initialValue="admin"
                    name="username"
                    rules={[
                              {
                                required: true,
                                message: '请输入用户名!',
                              },
                              {
                                max: 12,
                                message: '用户名最大长度为12位!',
                              },
                              {
                                min: 4,
                                message: '用户名最小长度为4位!',
                              },
                              {
                                pattern: /^\w+$/,
                                message: '用户名必须为字母数字下划线组成!',
                              },
                              
                          ]}>
                      <Input 
                            prefix={<UserOutlined className="site-form-item-icon" />} 
                            placeholder="用户名"
                            />
                </Form.Item>
                <Form.Item  
                    initialValue="admin"
                    name="password"
                    rules={[
                        {
                          required: true,
                          message: '请输入密码!',
                        },
                        {
                          min: 4,
                          message: '密码最小长度为4位!',
                        },
                        {
                          pattern: /^\w+$/,
                          message: '密码必须为字母数字下划线组成!',
                        },
                        
                    ]}>
                      <Input   
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            placeholder="用户密码"/>
                </Form.Item>

                 <Form.Item >
                   <Button type="primary" htmlType="submit" className="login-form-button">登录</Button>
                </Form.Item>
           </Form>
         </div>
          
        </div>
    </LoginWrapper>
  )
})
